<template>
  <view class="viewport">
    <fui-nav-bar
      background="#0052D9"
      title="筛选"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="ul">
        <view class="li">
          <fui-input
            v-model="filterForm.repairSubject"
            label="报修主题"
            borderTop
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="filterForm.deviceName"
            label="设备名称"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="filterForm.location"
            label="存放位置"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="filterForm.emergency"
            label="紧急程度"
            :bottomLeft="0"
            placeholder="请输入"
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="show = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="filterForm.status"
            label="审核状态"
            :bottomLeft="0"
            placeholder="请输入"
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="showA = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="filterForm.startTime"
            label="开始时间"
            :bottomLeft="0"
            placeholder="请输入"
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="showB = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="filterForm.endTime"
            label="结束时间"
            :bottomLeft="0"
            placeholder="请输入"
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="showC = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="filterForm.applyUser"
            label="提交人"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
        </view>
      </view>
      <fui-picker
        :options="options"
        :show="show"
        @change="change"
        @cancel="cancel"
      ></fui-picker>
      <fui-picker
        :options="optionsA"
        :show="showA"
        @change="changeA"
        @cancel="cancelA"
      ></fui-picker>
      <up-calendar
        :show="showB"
        :mode="mode"
        @confirm="confirm"
        @close="showB = false"
      ></up-calendar>
      <up-calendar
        :show="showC"
        :mode="mode"
        @confirm="confirmC"
        @close="showC = false"
      ></up-calendar>
    </view>
    <view class="footer">
      <view class="reset" @click="reset">重置</view>
      <view class="reset confirm" @click="confirmFilter">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const leftClick = () => {
  uni.navigateBack();
};

// 筛选条件表单
const filterForm = ref({
  repairSubject: "", // 报修主题
  deviceName: "", // 设备名称
  location: "", // 存放位置
  emergency: "", // 紧急程度
  status: "", // 审核状态
  startTime: "", // 开始时间
  endTime: "", // 结束时间
  applyUser: "", // 提交人
});

// 紧急程度
const show = ref(false);
const options = ref(["全部", "紧急", "高", "中", "低"]);

// 审核状态
const showA = ref(false);
const optionsA = ref([
  "全部",
  "待审核",
  "驳回",
  "已撤回",
  "审核中",
  "已完成",
  "待维修",
  "维修中",
]);

const change = (e) => {
  show.value = false;
  filterForm.value.emergency = e.value;
};

const changeA = (e) => {
  filterForm.value.status = e.value;
  showA.value = false;
};

const cancel = () => {
  show.value = false;
};

const cancelA = () => {
  showA.value = false;
};

// 时间选择器开始
const showB = ref(false);
const mode = ref("single");
const confirm = (e) => {
  filterForm.value.startTime = e["0"];
  showB.value = false;
};

//结束时间选择器
const showC = ref(false);
const confirmC = (e) => {
  filterForm.value.endTime = e["0"];
  showC.value = false;
};

//重置
const reset = () => {
  Object.keys(filterForm.value).forEach((key) => {
    filterForm.value[key] = "";
  });
};

// 确认筛选
const confirmFilter = () => {
  // 将筛选条件传回到上一个页面
  console.log(filterForm.value, 456);
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  if (prevPage) {
    uni.$emit("filterConditions", filterForm.value);
    uni.navigateBack();
  }
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.warp {
  flex: 1;
}
.footer {
  display: flex;
  .reset {
    width: 50%;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #ccc;
    color: #0052d9;
  }

  .confirm {
    color: #fff;
    background-color: #0052d9;
  }
}
</style>
